#include("/common/_layout.html")
#@layout()
#define layoutHead()
	<title>课程详情</title>
	<style>
		.div_add_class{display: none; margin: 10px;}
		.upfilediv{display: none;}
	</style>
#end
#define layoutBody()
	<body>
		<div class="page-content-wrap">
				<div class="layui-form">
					<div class="layui-tab" style="margin: 0;">
						<ul class="layui-tab-title">
							<li><a id="a_goback_url" href="javascript:window.history.back();">课程列表</a></li>
							<li class="layui-this">课程详情</li>
						</ul>
						<div class="layui-tab-content" id="mainDivClass">
							<div class="layui-tab-item"></div>
							<div class="layui-tab-item layui-show">
								<div class="layui-form-item">
									<div class="layui-inline">
										<img id="front_cover_url" src="" width="100" height="100">
									</div>
									<div class="layui-inline">
										<div id="div_course_name" style="line-height: 33px; font-size:22px; font-weight:bold;"></div>
										<div id="div_lecturer_name" style="line-height: 33px;">主讲老师：</div>
										<div id="div_subject_name" style="line-height: 33px;">课程科目：</div>
									</div>
									<div class="layui-inline">
										<div id="div_add_time" style="line-height: 33px; margin-top:33px;">创建时间：</div>
										<div id="div_power_id" style="line-height: 33px;"> 发布对象：</div>
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-inline">
										<button id="btn_addclass" class="layui-btn layui-btn-mini layui-btn-primary add-class">+ 添加课节</button>
									</div>
								</div>
								<div class="layui-form-item" id="showListClass">
								</div>
							</div>
						</div>
					</div>
				</div>
		</div>
		<div id="div_add_class" class="div_add_class">
			<form class="layui-form" lay-filter="formclass">
				<input type="hidden" id="course_id" name="course_id">
				<input type="hidden" id="class_id" name="class_id">
				<input type="hidden" id="parent_id" name="parent_id">
				<input type="hidden" id="class_typeid" name="class_typeid">
				<div class="layui-form-item">
					<label class="layui-form-label" id="colname_1st">课节名称：</label>
					<div class="layui-input-block">
						<input type="text" name="class_title" placeholder="请输入名称" required lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">排序：</label>
					<div class="layui-input-block">
						<input type="text" name="class_sort" placeholder="请输入排序" required lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item upfilediv">
					<label class="layui-form-label">文件类型：</label>
					<div class="layui-input-block">
						<select id="file_type" name="file_type">
							<option value="">请选择</option>
							<option value="1">视频</option>
							<option value="2">音频</option>
							<option value="3">图片</option>
							<option value="4">文件</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item upfilediv">
					<label class="layui-form-label">时长(分钟)：</label>
					<div class="layui-input-block">
						<input type="text" name="time_len" placeholder="单位:分钟, 音视频时长, 非媒体文件请置空" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item upfilediv">
					<label class="layui-form-label">上传文件：</label>
					<div class="layui-input-block">
						<input type="text" id="file_url" name="file_url" placeholder="请输入文件URL,或点击[上传文件]按钮上传" class="layui-input">
						<input type="hidden" id="file_len" name="file_len">
						<input type="hidden" id="file_type1" name="file_type1">
						<br>
						<input type="file" name="file_file_url" lay-ext="jpeg|jpg|png|gif|doc|docx|xls|xlsx|ppt|pptx|txt|pdf|mp4|3gp|flv|mpeg4|wma|mp3" lay-type="file" lay-title="上传文件" class="layui-upload-file">
						<div id="div_file_url" style="padding: 5px;"></div>
					</div>
				</div>
				<div class="layui-form-item" style="padding-left: 10px;">
					<div class="layui-input-block">
						<button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">立即提交</button>
						
					</div>
				</div>
			</form>
		</div>
		
		<!-- #[[ -->
		<script id="tplListClass" type="text/html">
			<table class="layui-table" lay-even lay-skin="nob">
				  <colgroup>
					<col>
					<col width="60">
					<col width="60">
					<col width="50">
					<col width="50">
				</colgroup>
				  <thead>
					<tr>
					  <th>{{ d.p.class_sort }}. {{ d.p.class_title }}</th>
					  <th><button class="layui-btn layui-btn-mini layui-btn-primary add-class" data-id="{{ d.p.class_id }}">+ 添加点播</button></th>
					  <th><button class="layui-btn layui-btn-mini layui-btn-primary add-class" data-id="{{ d.p.class_id }}">+ 添加资料</button></th>
					  <th>
						  <button class="layui-btn layui-btn-mini layui-btn-normal edit-class" data-id="{{ d.p.class_id }}">* 编辑</button></th>
					  <th>
						  <button class="layui-btn layui-btn-mini layui-btn-danger del-class" data-id="{{ d.p.class_id }}">- 删除</button>
					  </th>
					</tr> 
				  </thead>
				  <tbody>
					  {{#  layui.each(d.listdata, function(index, item){ }}
						<tr>
						  <td><i class="layui-icon">{{ findFileIcon(item.file_type) }}</i> <a href="{{ item.file_url }}" target="_blank">{{ item.class_title }}  {{ formatUpFileLen(item) }}</a></td>
						  <td></td>
						  <td></td>
						  <td>
							  <button class="layui-btn layui-btn-mini layui-btn-primary edit-class" data-id="{{ item.class_id }}">* 编辑</button>
							  </td>
						  <td>
							  <button class="layui-btn layui-btn-mini layui-btn-primary del-class" data-id="{{ item.class_id }}">- 删除</button>
						  </td>
						</tr>
					  {{#  }); }}
				  </tbody>
			</table>
		</script>
		<!-- ]]# -->
		<script src="/static/js/jquery.formHelp.js" type="text/javascript" charset="utf-8"></script>
		<script>	
				
		function findFileIcon(file_type){
			if (file_type == 1){ return '&#xe6ed;'; }
			else if (file_type == 2){ return '&#xe6fc;'; }
			else {return "&#xe621;"; }
		}
		
		function formatUpFileLen(item){
			var stxt = "";
			if (item.hasOwnProperty('time_len')){
				stxt += item.time_len + "分钟 ";
			}
			if (item.hasOwnProperty('file_len')){
				stxt += bytesToSize(item.file_len * 1024);
			}
			return stxt;
		}
		
		var q_course_id = getUrlParam("id");
		var json_list_class;
		
			layui.use(['form', 'layer', 'laytpl', 'element', 'upload', 'layedit', 'dialog'], function() {
				var form = layui.form();
				var layer = layui.layer;
				var laytpl = layui.laytpl,
					layedit = layui.layedit,
					element = layui.element(),
					dialog = layui.dialog;			
				
				layui.upload({
					url: '/api/file/upload',
					success: function(res) {
						if (res.code == 0){
							var sourceId = res.data.paramid.replace("file_","");
							var ftype = $('input[name="' + res.data.paramid+'"]').attr("lay-type");
							
							$('#'+sourceId).val(res.data.src);
							$('#file_len').val(res.data.filelen);
							var filetype = 4;
							var imgtype = ".jpeg.jpg.png.gif",videotype = ".mp4.3gp.flv.mpeg4", audiotype = ".wma.mp3";
							if (imgtype.indexOf(res.data.fileext)>=0){filetype=3;}
							else if (videotype.indexOf(res.data.fileext)>=0){filetype=1;}
							else if (audiotype.indexOf(res.data.fileext)>=0){filetype=2;}
							$('#file_type').val(filetype);
							formatUpFile(sourceId, res.data.src, ftype);
							form.render("select");
						}else{
							parent.alertMsg(res.msg);
						}
					}
				});
								
				function formatUpFile(elid, surl, ftype){
					if (surl == null || surl == "" || surl == "undefined"){
						return;
					}
					var shtml = '<a href="'+surl+'" target="_blank">'+surl.substr(surl.lastIndexOf('/')+1)+'</a>';
					$('#div_'+elid).html(shtml);
				}
			
				// 页面侦听
				$('#mainDivClass').on('click', '.add-class', function(){
					var stitle = $(this).text();
					var cla_id = $(this).attr('data-id');
					openAddClassDiv(stitle);
					$('#course_id').val(q_course_id);
					if (stitle === "+ 添加课节"){ 
						$('div.upfilediv').hide(); 
						$('#class_typeid').val(1);
						$('#colname_1st').html('课节名称：');
					}else{ 
						$('div.upfilediv').show();
						$('#parent_id').val(cla_id);
						$('#class_typeid').val(2);
						$('#colname_1st').html('文件名称：');
					}
					return false;
				});
				
				$('#mainDivClass').on('click', '.edit-class', function(){
					var stitle = $(this).text();
					var cla_id = $(this).attr('data-id');
					openAddClassDiv(stitle);
					var rows1 = json_list_class.filter(function (e) { return e.class_id == cla_id; });
					for (var i = 0; i < rows1.length; i++){
						if (rows1[i].class_typeid == 1){
							stitle = "编辑课节";
							$('div.upfilediv').hide(); 
							$('#colname_1st').html('课节名称：');
						}else {
							stitle = "编辑资料";
							$('div.upfilediv').show();
							$('#colname_1st').html('文件名称：');
						}
						$('form[lay-filter="formclass"]').setForm(rows1[i]);
						form.render();
					}
					
					return false;
				});
				
				$('#mainDivClass').on('click', '.del-class', function(){
					var cla_id = $(this).attr('data-id');
					dialog.confirm({
						message:'您确定要进行删除吗？上传的文件也将删除，不可恢复！',
						success:function(){
							sendPost("/api/eduorg/course/delClass", {class_id: cla_id }, function(res) {
								layer.alert(res.msg, {
									title: '信息提示'
								}, function(idx){
									if (res.code==200){
										window.location.reload();
									}
									layer.close(idx);
								});
							});
						},
						cancel:function(){
							//layer.msg('取消了')
						}
					});
					return false;
				});
				
				//监听提交
				form.on('submit(formDemo)', function(formData){
					sendPost("/api/eduorg/course/saveClass", formData.field, function(res) {
						layer.alert(res.msg, {
							title: '信息提示'
						}, function(idx){
							if (res.code==200){
								window.location.reload();
							}
							layer.close(idx);
						});
					});
					return false;
				});
				
				function openAddClassDiv(stitle){
					$('form[lay-filter="formclass"]')[0].reset();
					layer.open({
						title: stitle,
						type: 1,
						area: '550px',
						offset: '50px',
						content: $('#div_add_class')
					});
				}
				
				function renderListClass(jdata){
					var getTpl = document.getElementById('tplListClass').innerHTML;
					laytpl(getTpl).render(jdata, function(html){
						document.getElementById('showListClass').innerHTML += html;
					});
				}
				
				// 页面初始化
				function page_init(){
					var id = getUrlParam('id');
					// 加载初始化编辑数据
					sendGet("/api/eduorg/course/getOne", {
						id : q_course_id,
						idesc: 1
					}, function(res) {
						// 初始化编辑数据
						if (res.hasOwnProperty("oneinfo")) {
							$('#front_cover_url').attr('src', res.oneinfo.front_cover_url);
							$('#div_course_name').html(''+res.oneinfo.course_name);
							$('#div_lecturer_name').html('主讲老师：'+res.oneinfo.lecturer_name);
							$('#div_subject_name').html('课程科目：'+res.oneinfo.subject_name);
							$('#div_add_time').html('创建时间：'+res.oneinfo.add_time);
							var powertxt = res.oneinfo.power_id == 1? "公开" : "私有";
							$('#div_power_id').html('发布对象：'+powertxt);
						}
						if (res.hasOwnProperty("listclass")) {
							var rows1 = res.listclass.filter(function (e) { return e.class_typeid == 1; });
							for (var i = 0; i < rows1.length; i++){
								var rows2 = res.listclass.filter(function (e) { return e.parent_id == rows1[i].class_id; });
								var jdata = {p: rows1[i], listdata: rows2} ;
								renderListClass(jdata);
							}
							json_list_class = res.listclass;
						}
						form.render();
						
						// 
						if (res.hasOwnProperty("oneinfo") && res.oneinfo.org_id != #(login_org_id)){
							$('button').hide();
						}
					});
				}
				
				
				page_init();
			});
			
			
					
		</script>
	</body>

#end